<template>
	<view class="pad box_ff">
		<view class="title-box">
			<view class="label">
				标题：
			</view>
			<input type="text" value="" placeholder="请输入文章标题"  @input="inputChange" data-key="title"/>
		</view>
		<view class="title-box">
			<view class="label">
				缩略图：
			</view>
			<view class="" class="image-input"  @click="imageBtn">
				请选择图片
			</view>
			<image v-if="thumb" :src="thumb" class="thumb" mode=""></image>
		</view>
		<view class="content">
			<view class="label">
				内容：
			</view>
			<view class="content-box">
				<textarea value="" placeholder="请输入文章内容"  @input="inputChange" data-key="content"/>
			</view>
		</view>
		<view class="add-btn btn" @click="addArticleBtn">
			新增文章
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'',
				content:'',
				thumb:''
			}
		},
		methods: {
			inputChange(e){
				if(e.target.dataset){
					this[e.target.dataset.key] = e.detail.value;
				}
			},
			imageBtn(){
				uni.chooseImage({
					count:1,
					success(res) {
						if (res.tempFilePaths.length > 0) {
							let filePath = res.tempFilePaths[0];
							const result = uniCloud.uploadFile({
							        filePath: filePath,
							        cloudPath: 'a.jpg',
									onUploadProgress: function(progressEvent) {
										  console.log(progressEvent);
										  var percentCompleted = Math.round(
											(progressEvent.loaded * 100) / progressEvent.total
										  );
										}
								}).then(res=>{
									console.log('success',res.fileID);
									if(res.success){
										uniCloud.getTempFileURL({
											fileID:res.fileID
										}).then(resp=>{
											console.log(resp);
										})
										// this.thumb = res.fileID;
									}
								})
							
						}
					}
				})
			},
			addArticleBtn(){
				let {title,content} = this;
				if(!title||!content){
					return this.$util.showToast("填写信息完整");
				}
				uniCloud.callFunction({
					name:'Article',
					data:{
						type:"add",
						data:{
							title,
							content,
							uid:2
						}
					}
				}).then(res=>{
					console.log(res);
				}).catch(err=>{
					console.error(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.label{
		color:#666666;
		line-height: 80rpx;
		padding-left:20rpx;
		border-bottom: 1rpx solid #CDCDCD;
	}
	.title-box{
		background-color: #FFFFFF;
		padding: 20rpx 0;
	}
	.image-input{
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border:1px solid #CDCDCD;
		border-radius: 10rpx;
	}
	.thumb{
		width: 560rpx;
		height: 280rpx;
	}
	.content{
		margin-top: 10rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}
	.add-btn{
		background-color: $btnBg;
		margin-top: $top;
		color: #FFFFFF;
	}
</style>
